<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    console.log(
        '%c %c\n%c测试%cMr.James', `
  `, `
  `, `
  color: #f3f3f4;
  padding: 4px 3px 4px 11px;
  background-color: #FF3D45;
  border-radius: 5px 0 0 5px;
  `, `
  color: #5A94C1;
  padding: 4px 11px 4px 3px;
  background-color: #bfd3de;
  border-radius: 0 5px 5px 0;
`)

    // 解构赋值
    var people = [
        {
            name: 'Mike Smith',
            family: {
                mother: 'Jane Smith',
                father: 'Harry Smith',
                sister: 'Samantha Smith'
            },
            age: 35
        },
        {
            name: 'Tom Jones',
            family: {
                mother: 'Norah Jones',
                father: 'Richard Jones',
                brother: 'Howard Jones'
            },
            age: 25
        }
    ];
    // For of 迭代和解构
    for (var { name: n, family: { father: f } } of people) {
        console.log('Name: ' + n + ', Father: ' + f);
    }
    // 给新的变量名赋值
    var obj = { a: 42, b: true };
    var { a: foo, b: bar } = obj;

    console.log(foo); // 42  
    console.log(bar); // true 

    // 交换变量
    var a = 1;
    var b = 3;

    [a, b] = [b, a];
    console.log(a); // 3
    console.log(b); // 1

    //数组结构
    var a, b, rest;
    [a, b] = [10, 20];
    console.log(a); // 10
    console.log(b); // 20

    //对象解构
    ({ a, b } = { a: 10, b: 20 });
    console.log(a); // 10
    console.log(b); // 20

    // ...rest 解构数组
    [a, b, ...rest] = [10, 20, 30, 40, 50];
    console.log(a); // 10
    console.log(b); // 20
    console.log(rest); // [30, 40, 50]

    // ...rest 解构对象
    ({ a, b, ...rest } = { a: 10, b: 20, c: 30, d: 40 });
    console.log(a); // 10
    console.log(b); // 20
    console.log(rest); // {c: 30, d: 40}

    //解析一个从函数返回
    function f() {
        return [1, 2];
    }
    var a, b;
    [a, b] = f();
    console.log(a); // 1
    console.log(b); // 2

    // 箭头函数是匿名函数，如果需要用具名要声明一个变量
    let fn = () => { }

    // 如果函数里面代码少于一行可以简写成以下
    var arr = [0, 1, 2]
    let fn = arr.forEach(item => item++)

    function fns() {//具名函数
    }
</script>